<template>
    <div class="total-box">

        <div class="total-box-body">
            <div class="total-box-body-main">
                <div>
                    <p class="title-text">套餐配置</p>
                    
                </div>
                <div style="display: flex;">
                    <div style="display: flex ;width: 40%;">
                        <div style="width: 100%;">

                            <div style="margin-bottom: 20px;">
                                <el-switch v-model="switchValue" class="mb-2" active-text="自定义金额" inactive-text="" />
                            </div>
                            <div class="package-setting">

                                <div class="package-setting-body">

                                    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto" >
                                        <li v-for="i in taocanlist.length" :key="i" class="infinite-list-item">
                                            <div class="single-setting" v-if="taocanlist[i-1]">
                                                <div style="font-size: 14px;">套餐名称:{{ taocanlist[i - 1].name }}</div>
                                                <div
                                                    style="display: flex;justify-content: space-between;margin-bottom: 10px;">
                                                    <div style="display: flex;width: 80%;">
                                                        <div style="font-size: 12px;line-height: 32px;width: 50%;">
                                                            金额:{{ taocanlist[i - 1].jine }}</div>
                                                        <div style="font-size: 12px;line-height: 32px;width: 50%;">
                                                            备注:{{ taocanlist[i - 1].beizhu }}</div>
                                                    </div>
                                                    <div > <el-button type="primary" :icon="Delete" circle  @click="deletelist(taocanlist[i-1].id)" /></div>
                                                </div>
                                                <div style="display: flex;">
                                                    <div style="font-size: 12px;width: 50%;">
                                                        赠送余额{{ taocanlist[i - 1].zengsongyue }}
                                                    </div>
                                                    <div style="font-size: 12px;width: 50%;">
                                                        赠送积分{{ taocanlist[i - 1].zengsongjifen }}
                                                    </div>

                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="package-setting-footer" @click="addpackage">
                                    添加套餐
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="displayAdd == true" class="addpackage">
                        <div style="width: 650px;margin: 0 auto;">
                            <div class="addpackage-title">
                                添加充值套餐
                            </div>

                            <el-form :model="form" label-width="120px">
                                <el-form-item label="套餐名称:">
                                    <el-input v-model="form.name" placeholder="请输入套餐名称" />
                                </el-form-item>
                                <el-form-item label="套餐金额:">
                                    <el-input v-model="form.jine" placeholder="请输入套餐金额" />
                                </el-form-item>

                                <div style="height: 32px;line-height: 32px;display: none;">
                                    <el-checkbox v-model="checked1" size="small" />
                                </div>

                                <el-form-item label="赠送积分:">

                                    <el-input v-model="form.zengsongjifen" placeholder="请输入赠送积分(默认不赠送积分)" />
                                </el-form-item>
                                <el-form-item label="赠送余额:">
                                    <el-input v-model="form.zengsongyue" placeholder="请输入赠送余额(默认不赠送余额)" />
                                </el-form-item>

                                <el-form-item label="备注">
                                    <el-input v-model="form.desc" type="textarea" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="closeadd">取消</el-button>
                                    <el-button type="primary" :plain="true" @click="onSubmit">确认添加</el-button>
                                </el-form-item>
                                
                            </el-form>

                        </div>



                    </div>
                </div>



            </div>

        </div>


    </div>
    
</template>
<script setup lang="ts">
import { h } from 'vue'
import { ElMessage } from 'element-plus'
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import { reactive } from 'vue'

const count = ref(0)
const load = () => {
    count.value += 2
}


const switchValue = ref(true);
let displayAdd = ref(false)
let checked1 = ref('1')
const addpackage = () => {
    displayAdd.value = true
}
const closeadd = () => {
    displayAdd.value = false
}
const onSubmit = () => {
    taocanlist.push({
        id:taocanlist.length,
        jine: Number(form.jine),
        beizhu: form.desc,
        zengsongyue: Number(form.zengsongyue),
        zengsongjifen: Number(form.zengsongjifen),
        name: form.name,
    })
    ElMessage({
    message: h('p', null, [
      h('span', { style: 'color: green' }, '添加成功'),
    ]),
  })
  displayAdd.value = false
    
}

const form = reactive({
    
    name: '',
    jine: '',
    zengsongjifen: '',
    zengsongyue: '',
    desc: '',
})

let taocanlist = reactive([
    {
        id:0,
        jine: 1,
        beizhu: '',
        zengsongyue: 1,
        zengsongjifen: 1,
        name: ''

    }
])
const deletelist=(v:number)=>{
    console.log(v)
    console.log(taocanlist)
    taocanlist=taocanlist.splice(v+1,1)
    for(let i=v+1;i<taocanlist.length;i++){
        taocanlist[i].id--
    }
    console.log(taocanlist)
    
}
</script>

<style scoped>
.title-text {
    margin-bottom: 20px;
    color: #797979;
    font-weight: 700;
    font-size: 18px;
}

.package-setting {
    max-height: 680px;
    min-height: 20%;
    max-width: 450px;
    background-color: rgb(245, 245, 245);
    border-radius: 8px;
}

.package-setting-body {
    height: 420px;
    padding-top: 10px;
}

.single-setting {
    height: 100px;
    width: 90%;
    border: 1px;
    border-radius: 8px;
    background-color: white;
    margin: 0 auto;
    margin-bottom: 15px;
    padding: 10px;
}

.package-setting-footer {
    height: 50px;
    background-color: white;
    line-height: 50px;
    text-align: center;
    font-weight: 400;
    border: rgb(228, 228, 228) solid;
    border-width: 1px;
    border-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    color: #515151;
    cursor: pointer;
}

.addpackage {

    width: 50%;
    border-radius: 8px;
    border: rgb(245, 245, 245) solid;
    border-width: 1px;
}

.addpackage-title {
    text-align: center;
    line-height: 40px;
    height: 40px;
    font-size: 18;
    font-weight: 700;
    margin: 20px 0px;

}

.infinite-list {
    height: 400px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;

    margin: 10px;
}

.infinite-list .infinite-list-item+.list-item {
    margin-top: 10px;
}

:deep(.el-breadcrumb) {
    line-height: 45px;
    font-size: 16px;
}</style>